<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script src="js/china.js"></script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="js/jquery.min.js"></script>

    <script src="js/commom.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=bVhXlaPpURqYlnO4C5kljjS8plbjyqTr">
        //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
    </script>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.js"></script>
    <title>顺和物联统一调度平台</title>
    <link rel="stylesheet" href="css/detailsTwo.css">
</head>

<body>
    <div class="page">
        <div class="title">
            <div class="titleTxt">顺和物联统一调度平台</div>
            <div class="time">
                <div id="showTime"></div>
                <!-- <div id="localtime"></div> -->
                <script type="text/javascript">
                    function showLocale(objD) {
                        var str, colorhead, colorfoot;
                        var yy = objD.getYear();
                        if (yy < 1900) yy = yy + 1900;
                        var MM = objD.getMonth() + 1;
                        if (MM < 10) MM = '0' + MM;
                        var dd = objD.getDate();
                        if (dd < 10) dd = '0' + dd;
                        var hh = objD.getHours();
                        if (hh < 10) hh = '0' + hh;
                        var mm = objD.getMinutes();
                        if (mm < 10) mm = '0' + mm;
                        var ss = objD.getSeconds();
                        if (ss < 10) ss = '0' + ss;
                        var ww = objD.getDay();

                        str = yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
                        //alert(str);
                        return str;
                    }

                    function tick() {
                        var today;
                        today = new Date();
                        document.getElementById("showTime").innerHTML = showLocale(today);
                        window.setTimeout("tick()", 1000);
                    }
                    tick();
                </script>

            </div>
        </div>

        <div class="content">
            <div class="order">

                <div class="orderDetails" id="app">
                    <div class="boxCol">
                        <div>运单号</div>
                        <div>受理时间</div>
                        <div>发货人</div>
                        <div>发货人电话</div>
                        <div>收货人</div>
                        <div>收货人电话</div>
                    </div>

                    <div v-for="(item, index) in result" :key="index">
                        <div class="boxCol" @click="show(item, result, index)">
                            <div>{{item.order_sn}}</div>
                            <div>{{getPartTime(item.create_time)}}</div>
                            <div>{{item.sender_name}}</div>
                            <div>{{item.sender_mobile}}</div>
                            <div>{{item.receiver_name}}</div>
                            <div>{{item.receiver_mobile}}</div>
                        </div>
                        <div id="details" class="orderContent" v-for="(i, index) in item.goods" :key="index" v-show="item.isShow">
                            <!-- <div class="boxContent">
                                <div style="color: #e7da1d; font-size: 1vw;">收发货人信息</div>
                                <div class="message">
                                    <div>
                                        <div>发货人：胡天</div>
                                        <div>发货人电话：13333333333</div>
                                        <div title="发货人地址：济南市历下区花园东路力高国际" class="txt">发货人地址：济南市历下区花园东路力高国际</div>
                                    </div>
                                    <div>
                                        <div>收货人：胡天</div>
                                        <div>收货人电话：13333333333</div>
                                        <div class="txt">收货人地址：济南市历下区花园东路力高国际</div>
                                    </div>
                                </div>
                            </div> -->
                            <div class="boxContent">
                                <div style="color: #e7da1d; font-size: 1vw;">货物信息</div>
                                <div class="messages">
                                    <div>名称：{{i.goods_name}}</div>
                                    <div>重量：{{i.goods_weight}}{{i.goods_spec}}</div>
                                    <div>体积：{{i.goods_volume}}m³</div>
                                    <div>件数：{{i.goods_num}}{{i.goods_pack}}</div>
                                </div>
                            </div>

                            <!-- <div class="boxContent">
                                <div style="color: #e7da1d; font-size: 1vw;">增值服务信息</div>
                                <div class="messages">
                                    <div>是否提货：是</div>
                                    <div>是否回单：是</div>
                                    <div>是否送货：是</div>
                                </div>
                            </div>
                            <div class="boxContent">
                                <div style="color: #e7da1d; font-size: 1vw;">运费信息</div>
                                <div class="messages">
                                    <div>运费：1000</div>
                                    <div>保费：200</div>
                                    <div>代收款：10000</div>
                                    <div>提货费：100</div>
                                    <div>送货费：200</div>
                                </div>
                            </div> -->
                        </div>
                    </div>
                </div>

            </div>
            <div class="map" id="map">
                <!-- <img class="mapImg" src="/images/map.png" alt=""> -->
            </div>
        </div>
    </div>

</body>

</html>
<script>
    var a = GetReques();
    //console.log(a)
    function GetReques() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
            }
        }
        return theRequest;
        // console.log(theRequest)
    }
    new Vue({
        el: '#app',
        data: {
            // message: "20201023",

            result: []
        },
        // onshow: function () {
        //    this.GetRequest();

        // },
        // created() {

        // },
        mounted: function() {
            // getQueryString("id")
            // this.getsInfo();

            this.getData()
        },
        methods: {

            getPartTime(val) {
                var timearr = val.replace(" ", ":").replace(/\:/g, "-").split("-");
                // console.log(val)
                var timestr = Number(timearr[0]) + "-" + Number(timearr[1]) + "-" + timearr[2];
                return timestr;
            },



            getData: function() {
                var _data = {
                    carNum: a.value,
                    order_type: a.order_type
                }
                console.log("2222222")
                console.log(_data)
                var that = this
                $.ajax({

                    /***********初始化获取全部设备坐标********/
                    url: API_SERVER_URL + "car_info",
                    type: 'POST',
                    // contentType: 'application/json',
                    // header: {
                    //     'Content-type': 'application/x-www-form-urlencoded'
                    //     //"content-type":"application/json"
                    //      //"Access-Control-Allow-Origin": '*'
                    // },
                    // contentType: "application/json; charset=utf-8",
                    datatype: 'jsonp',
                    data: _data,
                    success: function(data) {
                        //console.log(data.data)
                        for (var i = 0, len = data.data.order.length; i < len; i++) {
                            if (i == 0) {
                                data.data.order[i].isShow = true
                            } else {
                                data.data.order[i].isShow = false
                            }
                        }

                        that.result = data.data.order

                    },
                    error: function(e) {
                        console.log(e)
                    }
                })

            },
            show: function(item, result, index) {
                item.isShow = !item.isShow;
                // console.log(result, index)
                // for(var i = 0, len = result.length; i< len; i++){
                //     if(index == i){
                //         continue;
                //     }
                //     result[i].isShow = !result[i].isShow;
                // }

            },
            aaa(item) {
                return item.isShow;
            },
        },
    })

    var map;



    //创建和初始化地图函数：
    function initMap() { ///初始化地图
        createMap();
        setMapEvent(); //设置地图事件
        addMapControl(); //向地图添加控件
        //addMarker(); //向地图中添加marker
        var locations = [];
        var _data = {
                carNum: a.value
            }
            // var _data = {
            //     status: 'A'
            // }
        var that = this
        $.ajax({

            /***********初始化获取全部设备坐标********/
            url: API_SERVER_URL + "car_info",
            type: 'POST',
            // contentType: 'application/json',
            // header: {
            //     'Content-type': 'application/x-www-form-urlencoded'
            //     //"content-type":"application/json"
            //      //"Access-Control-Allow-Origin": '*'
            // },
            // contentType: "application/json; charset=utf-8",
            datatype: 'jsonp',
            data: _data,
            success: function(data) {
                //console.log(data.data.location)
                that.locations = data.data.location
                    //console.log(that.locations)

                //创建地图
                map.centerAndZoom(new BMap.Point(that.locations[0].lon, that.locations[0].lat), 13);
                // console.log('1111111111111111111111')
                var arr = that.locations
                    // console.log(arr)
                var myP1 = new BMap.Point(arr[0].lon, arr[0].lat); //起点arr
                var myP2 = new BMap.Point(arr[arr.length - 1].lon, arr[arr.length - 1].lat); //终点

                var myIcon = new BMap.Icon("images/hc3.png", new BMap.Size(120, 50), { //小车图片
                    //offset: new BMap.Size(0, -5),    //相当于CSS精灵
                    imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
                });
                var driving2 = new BMap.DrivingRoute(map, {
                    renderOptions: {
                        map: map,
                        autoViewport: false
                    }
                }); //驾车实例
                driving2.search(myP1, myP2, arr); //显示一条公交线路

                window.run = function(arr) {
                    var driving = new BMap.DrivingRoute(map); //驾车实例
                    driving.search(myP1, myP2);
                    driving.setSearchCompleteCallback(function() {
                        var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组
                        var paths = pts.length; //获得有几个点

                        var carMk = new BMap.Marker(pts[0], {
                            icon: myIcon
                        });
                        map.addOverlay(carMk);
                        i = 0;

                        function resetMkPoint(i) {
                            carMk.setPosition(pts[i]);
                            if (i < paths) {
                                setTimeout(function() {
                                    i++;
                                    resetMkPoint(i);
                                }, 60);
                            }
                        }
                        setTimeout(function() {
                            resetMkPoint(5);
                        }, 100)

                    });
                }
                setTimeout(function() {
                    run();
                }, 1500);
            },
            error: function(e) {
                console.log(e)
            }
        })



    }

    // setInterval(getData, 2000); //定时器
    //创建地图函数：
    function createMap() {
        map = new BMap.Map("map"); //在百度地图容器中创建一个地图
        var point = new BMap.Point(116.249684, 36.569412); //定义一个中心点坐标
        map.centerAndZoom(point, 15); //设定地图的中心点和坐标并将地图显示在地图容器中
        // window.map = map; //将map变量存储在全局
        map.setMapStyleV2({
            styleId: '04ec7db1deb55c04daa364702d68652e'
        });
    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
        map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard(); //启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_ZOOM
        });
        map.addControl(ctrl_nav);
        var ctrl_sca = new BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrl_sca);
    }


    /*****************************************获取设备信息**************************************************/
    initMap(); //创建和初始化地图
</script>